<template>
	<div class="wrapper">
		<img class="wrapper__img" src="http://www.dell-lee.com/imgs/vue3/user.png" alt="">
		<div class="wrapper__input">
			<input type="text" class="wrapper__input__content"
				   placeholder="请输入用户名" v-model="username">
		</div>
		<div class="wrapper__input">
			<input type="password" class="wrapper__input__content" autocomplete="new-password"
				   placeholder="请输入密码" v-model="password">
		</div>
		<div class="wrapper__login--button" @click="handleLogin">登录</div>
		<div class="wrapper__login--link" @click="handleRegister">立即注册</div>

	</div>
	<Toast v-if="show" :message="toastMsg" />
</template>

<script>
import {reactive, toRefs} from "vue";
import { useRouter } from 'vue-router'

import { post } from '@/utils/request'
import Toast, { useToastEffect } from '@/components/Toast';

const useLoginEffect = (showToast) => {
	const router = useRouter();
	const data = reactive({username: '', password: ''})

	const handleLogin = async () => {
		try {
			const result = await post('/api/user/login', {
				username: data.username,
				password: data.password
			})
			if (result?.errno === 0) {
				localStorage.isLogin = true
				router.push({name: 'Home'})
			} else {
				showToast("登陆失败")
			}
		} catch (e) {
			showToast("网络错误")
		}
	}
	const {username, password} = toRefs(data)
	return {username, password, handleLogin}
}

const useRegisterEffect = () => {
	const router = useRouter();
	const handleRegister = () => {
		router.push({name: 'Register'})
	};
	return { handleRegister }
}

export default {
	name: "login",
	components: { Toast },
	setup() {
		const { show, showToast, toastMsg } = useToastEffect();
		const { username, password, handleLogin } = useLoginEffect(showToast);
		const { handleRegister } = useRegisterEffect();
		return { handleLogin, handleRegister, show, toastMsg, password, username }
	}
}
</script>

<style lang="scss" scoped>
@import "src/style/viriables.scss";

.wrapper {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);

	&__img {
		width: .66rem;
		height: .66rem;
		display: block;
		margin: 0 auto .44rem auto;
	}

	&__input {
		box-sizing: border-box;
		height: .48rem;
		margin: 0 .4rem .16rem .4rem;
		background: #f9f9f9;
		border-radius: 6px;
		border: 1px solid rgba(0, 0, 0, 0.1);
		padding: 0 .16rem;

		&__content {
			line-height: .48rem;
			background: none;
			border: none;
			outline: none;
			width: 100%;
			font-size: .16rem;

			&::placeholder {
				color: $shadow_fontcolor;
			}
		}
	}

	&__login--button {
		margin: .32rem .4rem .16rem .4rem;
		line-height: .48rem;
		font-size: .16rem;
		text-align: center;
		background: #0091ff;
		box-shadow: 0 .04rem .08rem 0 rgba(0, 145, 255, 0.32);
		border-radius: .04rem;
		color: $bgcolor;
	}

	&__login--link {
		font-size: .14rem;
		color: $shadow_fontcolor;
		text-align: center;
	}
}
</style>